<!DOCTYPE html>
<!-- 加入我们 -->
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>慕课网讲师团招募页面</title>
	<link rel="stylesheet" href="styles.css">
	<link rel="stylesheet" href="css/nav.css">
	<link rel="stylesheet" href="css/denglu.css" />
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="js/ip.js"></script>
	<style>
		/* 页面容器 */
		.containers {
			max-width: 1200px;
			margin: 0 auto;
			padding: 20px;
		}

		/* 头部导航 */
		.navbar {
			background-color: #fff;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
		}

		.navbar .containers {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60px;
		}

		.logo {
			width: 100px;
		}

		.navbar nav ul {
			list-style: none;
			display: flex;
		}

		.navbar nav ul li {
			margin-left: 20px;
		}

		.navbar nav ul li a {
			color: #333;
			text-decoration: none;
		}

		.search-form input[type="text"] {
			border: 1px solid #ccc;
			padding: 5px;
		}

		.search-form button {
			background-color: #e74c3c;
			color: white;
			border: none;
			padding: 5px 10px;
			cursor: pointer;
		}

		.user-profile img {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}

		/* 主体内容 */
		main section {
			margin-top: 80px;
			text-align: center;
		}

		main h2 {
			font-size: 2rem;
			margin-bottom: 20px;
		}

		main p {
			font-size: 1rem;
			line-height: 1.5;
			margin-bottom: 20px;
		}

		.btn {
			display: inline-block;
			background-color: #e74c3c;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			text-decoration: none;
			margin-top: 20px;
		}

		/* 收益部分 */
		.benefit-items {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			margin-top: 20px;
		}

		.benefit-item img {
			width: 100%;
			height: auto;
		}

		.benefit-item h3 {
			font-size: 1.2rem;
			margin: 10px 0;
		}

		.benefit-item p {
			font-size: 0.8rem;
			color: #666;
		}

		/* 为什么选择我们部分 */
		.reason-items {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			margin-top: 20px;
		}

		.reason-item img {
			width: 100%;
			height: auto;
		}

		.reason-item h3 {
			font-size: 1.2rem;
			margin: 10px 0;
		}

		.reason-item p {
			font-size: 0.8rem;
			color: #666;
		}

		/* 新添加的样式 */
		.item-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #ff6600;
			color: #fff;
			padding: 20px;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}

		.reason-item {
			border-radius: 10px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		}

		/* 如何开始部分 */
		.step-items {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

			gap: 20px;
			margin-top: 20px;

		}

		.step-item {
			clip-path: polygon(50% 0%, 90% 20%, 90% 80%, 50% 100%, 10% 80%, 10% 20%);
			background-color: #ff6600;
			color: #fff;
		}

		.step-item h3 {
			font-size: 1.2rem;
			margin: 10px 0;
		}

		.step-item p {
			font-size: 0.8rem;
			color: #666;
		}

		/* 成功故事部分 */
		.story-items {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

			gap: 20px;
			margin-top: 20px;
		}

		.story-item img {
			width: 100%;
			height: auto;
		}

		.story-item h3 {
			font-size: 1.2rem;
			margin: 10px 0;
		}

		.story-item p {
			font-size: 0.8rem;
			color: #666;
		}

		/* 团队支持部分 */
		.team-support {
			margin-top: 20px;
		}

		.team-support p {
			font-size: 1.2rem;
			margin-bottom: 20px;
		}

		/* 底部导航 */
		.footer {
			background-color: #f5f5f5;
			padding: 20px 0;
			text-align: center;
		}

		.footer nav ul {
			list-style: none;
			display: flex;
			justify-content: center;
		}

		.footer nav ul li {
			margin: 0 10px;
		}

		.footer nav ul li a {
			color: #333;
			text-decoration: none;
		}
	</style>

</head>

<body>
	<div id="loginPopup" class="popup-overlay">
		<div class="popup-content">
			<div class="container">
				<div class="tit">登录</div>
				<input type="text" id="po" placeholder="账号" />
				<input type="password" id="pw" placeholder="密码">
				<button id="login">登录</button>
				<span class="go-register">没有账号？去注册</span>
				<span class="close-popup" data-dismiss="login">×</span> <!-- 关闭按钮 -->
			</div>
		</div>
	</div>
	<div id="registerPopup" class="popup-overlay">
		<div class="popup-content">
			<div class="container">
				<div class="tit">注册</div>
				<input type="text" placeholder="用户名" id="reg_username" />
				<input type="text" placeholder="手机号" id="reg_phone" />
				<input type="password" placeholder="设置密码" id="reg_password">
				<input type="password" placeholder="确认密码" id="reg_confirm_password">
				<button id="register">注册</button>
				<span class="go-login">已有账号？去登录</span>
				<span class="close-popup" data-dismiss="register">×</span> <!-- 关闭按钮 -->
			</div>
		</div>
	</div>




	<nav class="nav">



		<div class="ndiv">
			<ul>
				<a href="index.html" class="logo">

					卓越在线首页
				</a>
			</ul>
			<ul>
				<li><a href="FreeClasses.html" class="fcolor">免费课</a></li>
				<li><a href="PracticalClasses.html" class="fcolor">实战课</a></li>
				<li><a href="SystematicCourses.html" class="fcolor">体系课</a></li>

				<li class="shangyehezuo">商业合作
					<div class="syhz">
						<p><a href="enterpriseServices.html">企业服务</a></p>
						<p><a href="teacherSettled.html">讲师入住</a></p>
					</div>
				</li>
				<li><a href="teacherlogin.html">教师系统</a></li>
			</ul>
			<ul class="rig">
				<input type="text" placeholder="请输入关键字">
				<button class="search">🔎搜索</button>
				<a href="shoppingcart.html">
					<img src="img/购物车.png" alt="" class="gwc">
				</a>

				<span>登录</span>&nbsp;<span>注册</span>
				<span class="dlxx">
					<a href="" class="xxtz"><img src="img/XXTZ.png" alt="" /></a>
					<a href="personalhomepage.html" class="grzy">
						<img src="img/SZK.png" alt="" />
					</a>
					<span id="tcdl">退出</span>
				</span>
			</ul>
		</div>
		</div>
	</nav>
	<!-- 主体内容 -->
	<main>
		<!-- 第一部分：加入我们 -->
		<section class="join-us">
			<div class="containers">
				<h2>加入慕课网讲师团 让技术再次发光</h2>
				<p>与其寻找副业增加收入，不如开辟职业第二春<br>用专业收获学员认可，让技术展现更多价值</p>
				<a href="registrationapplication.html" class="btn">加入我们</a>
			</div>
		</section>

		<!-- 第二部分：你将有哪些收获？ -->
		<section class="benefits">
			<div class="containers">
				<h2>你将有哪些收获？</h2>
				<div class="benefit-items">
					<div class="benefit-item">
						<img src="benefit1.png" alt="Benefit 1">
						<h3>课程报酬</h3>
						<p>输出专业的知识和经验，为学员提供优质教学服务，通过授课获得可观收入。</p>
					</div>
					<div class="benefit-item">
						<img src="benefit2.png" alt="Benefit 2">
						<h3>行业影响</h3>
						<p>为学员提供专业指导，提升个人口碑，获取学员对你专业的认可。</p>
					</div>
					<div class="benefit-item">
						<img src="benefit3.png" alt="Benefit 3">
						<h3>沉淀经验</h3>
						<p>在教学过程中沉淀经验，将知识系统化展示，让自身专业能力得到提升。</p>
					</div>
				</div>
			</div>
		</section>
		<!-- 为什么选择卓越在线部分 -->
		<section class="reasons">
			<div class="containers">
				<h2>为什么选择卓越在线？</h2>
				<div class="reason-items">
					<div class="reason-item">
						<div class="item-content">
							<img src="reason1.png" alt="Reason 1">
							<h3>全程教学指导</h3>
						</div>
						<p>讲师个性化课程选题，拥有全面的内容策划经验，全程协助完成教学内容设计。</p>
					</div>
					<div class="reason-item">
						<div class="item-content">
							<img src="reason2.png" alt="Reason 2">
							<h3>良好的平台口碑</h3>
						</div>
						<p>超2400万的学生用户，课程质量严格把控，获得学生好评无数。</p>
					</div>
					<div class="reason-item">
						<div class="item-content">
							<img src="reason3.png" alt="Reason 3">
							<h3>多样化授课形式</h3>
						</div>
						<p>多种授课形式任选，学/练/测/评全场景覆盖，满足所有授课学习需求。</p>
					</div>
				</div>
			</div>
		</section>

		<!-- 第四部分：如何开始？ -->
		<section class="steps">
			<div class="containers">
				<h2>如何开始？</h2>
				<div class="step-items">
					<div class="step-item">
						<h3>Step.1 提交申请</h3>
						<p>迈出第一步，让我们初步了解你突出的专业技能和经验。</p>
					</div>
					<div class="step-item">
						<h3>Step.2 能力测试</h3>
						<p>这没什么难的，录制试讲视频考察授课综合能力。</p>
					</div>
					<div class="step-item">
						<h3>Step.3 大纲设计</h3>
						<p>专业团队协助确定教学目标及大纲精细化教学设计。</p>
					</div>
					<div class="step-item">
						<h3>Step.4 签约加入</h3>
						<p>不急不躁计划先行，确定后续课程计划及课程进度控制。</p>
					</div>
				</div>
			</div>
		</section>

		<!-- 第五部分：付出终有回报 -->
		<section class="success-stories">
			<div class="containers">
				<h2>付出终有回报</h2>
				<div class="story-items">
					<div class="story-item">
						<img src="story1.png" alt="Story 1">
						<h3>Geely</h3>
						<p>丰富的互联网项目经验，公司内部技术讲师，热爱技术，乐于分享；教学格言：把复杂的技术简单化，简单的技术极致化。</p>
					</div>
				</div>
			</div>
		</section>

		<!-- 第六部分：你不是一个人在奋斗 -->
		<section class="team-support">
			<div class="containers">
				<h2>你不是一个人在奋斗</h2>
				<p>我们的内容教研团队会协助你完成课程设计，并且提供科学的教学方法和技巧让你如虎添翼，高效输出优质课程，斩获一大波粉丝。</p>
				<a href="#" class="btn">加入我们</a>
			</div>
		</section>
	</main>

	<!-- 底部导航 -->
	<footer class="footer">
		<div class="containers">
			<nav>
				<ul>
					<li><a href="#">企业服务</a></li>
					<li><a href="#">网站地图</a></li>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">联系我们</a></li>
					<li><a href="#">讲师招募</a></li>
					<li><a href="#">帮助中心</a></li>
					<li><a href="#">意见反馈</a></li>
					<li><a href="#">代码托管</a></li>
				</ul>
			</nav>
		</div>
	</footer>
	
	<script src="js/denglu.js"></script>
</body>

</html>